<template>
  <div>
    <div>
      <GradeSelect v-model="grade_id" @clear="triggerClear" @change="handleGradeChange" />
      <!--      <el-button type="primary" @click="go()">导出报告</el-button>-->
    </div>
    <StatisticsItem
      :mode="compositeModel.mode"
      title="1、综合测评完成情况"
      subtitle="反应学生的当前生涯测评完成度，建议确保90%以上的完成度才能获得准确分析结果"
      @total="handleCompositeTotal"
      @page="handleCompositePage"
      @view="()=>{
        this.$router.push({
          name: 'pc-statistics-career-complex'
        })
      }"
    >
      <div slot="graph">
        <CirclePie ref="composite" cid="1" :data="composite" />
      </div>
    </StatisticsItem>
    <StatisticsItem
      :mode="examModel.mode"
      title="2、单项测试类型结果人数比"
      subtitle="反映学生所做每一项测评的结果类型的人数占比，用于了解学生性格，观念，能力和成长环境类型结果的人员结构。"
      @total="handleExam"
      @page="handleExamPage"
      @view="()=>{
        this.$router.push({
          name: 'pc-statistics-career-single'
        })
      }"
    >
      <div slot="graph">
        <BarYCategoryStack cid="1" :y-data="worth" name="职业价值观测试" />
        <BarYCategoryStack cid="2" :y-data="character" name="MBTI性格测试" />
        <BarYCategoryStack cid="3" :y-data="intelligence" name="多元智能测试" />
        <BarYCategoryStack cid="4" :y-data="grown" name="成长环境测试" />
        <BarYCategoryStack cid="5" :y-data="interest" name="职业兴趣测试" />
      </div>
    </StatisticsItem>
    <!--    <StatisticsItem-->
    <!--      title="3、推荐专业结果排行"-->
    <!--      subtitle="反映根据学生的类型结果所对应的专业类的排行，用于了解学生基于自我认知测试下的系统推荐专业热度。"-->
    <!--      @view="()=>{-->
    <!--        this.$router.push({-->
    <!--          name: 'statistics-career-recommend'-->
    <!--        })-->
    <!--      }"-->
    <!--    >-->
    <!--      <div slot="graph">-->
    <!--        -->
    <!--      </div>-->
    <!--    </StatisticsItem>-->
  </div>
</template>

<style scoped>
  h2>span {
    color: #8c939d;
    font-size: 12px;
  }
</style>

<script>
import CirclePie from '../../components/Chart/CirclePie'
import BarYCategoryStack from '../../components/Chart/BarYCategoryStack'
import StatisticsItem from '../statistics/components/statistics-item'
import GradeSelect from '../statistics/components/grade-select'
import { getComposite, getSyExam } from '../../api/pc-statistics'

export default {
  components: {
    GradeSelect: GradeSelect,
    CirclePie: CirclePie,
    StatisticsItem: StatisticsItem,
    BarYCategoryStack: BarYCategoryStack
  },
  data() {
    return {
      grade_id: '',
      class_id: '',
      composite: [],
      interest: [],
      worth: [],
      intelligence: [],
      grown: [],
      character: [],
      examModel: {
        mode: false
      },
      compositeModel: {
        mode: false
      },
      subjectRatioModel: {
        mode: false
      }
    }
  },
  mounted() {
    this.getComposite()
    this.getSyExam()
  },
  methods: {
    handleGradeChange(value) {
      if (parseInt(value) > 0) {
        this.grade_id = value
        console.log('grade1', value)
        this.compositeModel.mode = false
        this.examModel.mode = false
        this.getComposite({
          grade_id: this.grade_id
        })
        this.getSyExam({
          grade_id: this.grade_id
        })
      }
    },
    handleExam() {
      if (!this.grade_id) {
        this.$message.warning('请选择年级')
        return
      }
      this.examModel.mode = !this.examModel.mode
      if (this.examModel.mode) {
        this.handleExamPage(1)
      } else {
        this.getSyExam()
      }
    },
    handleExamPage(page) {
      this.getSyExam({
        grade_id: this.grade_id,
        class_name: page + '班'
      })
    },
    handleCompositeTotal() {
      if (!this.grade_id) {
        this.$message.warning('请选择年级')
        return
      }
      this.compositeModel.mode = !this.compositeModel.mode
      if (this.subjectRatioModel.mode) {
        this.handleCompositePage(1)
      } else {
        this.getComposite()
      }
    },
    handleCompositePage(page) {
      this.getComposite({
        grade_id: this.grade_id,
        class_name: page + '班'
      })
    },
    getSyExam(params) {
      const loading = this.$loading({
        lock: true,
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)',
        text: '加载中'
      })
      return getSyExam(params).then(res => {
        this.character = res.character
        this.interest = res.interest
        this.worth = res.worth
        this.intelligence = res.intelligence
        this.grown = res.grown
      }).finally(() => {
        loading.close()
      })
    },
    triggerClear() {
      // 全年级
      // 班级信息重置
      this.grade_id = ''
      this.compositeModel.mode = false
      this.examModel.mode = false
      this.getSyExam()
      this.getComposite()
    },
    getComposite(params) {
      const loading = this.$loading({
        lock: true,
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)',
        text: '加载中'
      })
      // this.loadingComposite = false
      getComposite(params).then((res) => {
        this.composite = res.composite
      }).finally(() => {
        // this.loadingComposite = false
        loading.close()
      })
    },
    go() {
      this.$router.push('/statistics/career-pc/complex')
    }
  }
}
</script>
